<template>
  <div class="storeConfigure">
    <el-form :inline="true" :model="productForm" ref="productForm" class="form-inline">
      <el-form-item label="售后联系人">
        <el-input v-model="productForm.afterSaleName"></el-input>
      </el-form-item><br />
      <el-form-item label="售后电话">
        <el-input v-model="productForm.afterSalePhone"></el-input>
      </el-form-item><br />
      <el-form-item label="售后地址">
        <div class="grid-content bg-purple-light">
          <el-select v-model="province" placeholder="请选择" @change = "selectChange">
            <el-option
              v-for="item in localLists"
              :key="item.provinceName"
              :label="item.provinceName"
              :value="item.id+','+item.provinceName">
            </el-option>
          </el-select>
          <el-select v-model="city" placeholder="请选择" @change = "selectCity" >
            <el-option
              v-for="item in cityLists"
              :key="item.cityName"
              :label="item.cityName"
              :value="item.id+','+item.cityName">
            </el-option>
          </el-select>
          <el-select v-model="district" placeholder="请选择">
            <el-option
              v-for="item in districtLists"
              :key="item.districtName"
              :label="item.districtName"
              :value="item.districtName">
            </el-option>
          </el-select>
        </div>
      </el-form-item><br />
      <el-form-item>
        <el-input v-model="locals" class="createStore-inputw" placeholder="请输入详细地址"></el-input>
      </el-form-item><br />
      <el-form-item>
        <el-button type="primary" @click="saleInfoSubmit">确认</el-button>
        <el-button @click="cancelBtn">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios'
  import {mapGetters, mapActions} from 'vuex'
  export default{
    name: 'storeConfigure',
    data () {
      return {
        productForm: {
          storeSysno: this.$route.params.id,
          afterSaleName: '',
          afterSalePhone: '',
          afterSaleAddress: ''
        },
        contractName: '',
        contractNo: '',
        localLists: [],
        districtLists: [],
        province: '',
        city: '',
        district: '',
        locals: '',
        cityLists: []
      }
    },
    computed: {
      // 映射State
      ...mapGetters([
        'isLogin'
      ])
    },
    methods: {
      ...mapActions([
        'getStorage', 'setStorage'
      ]),
      saleInfoSubmit () {
        this.productForm.afterSaleAddress = this.province[1] + this.city[1] + this.district + this.locals
        var params = this.productForm
        axios.post('/api/shop/editShop', params).then((res) => {
          if (res.data.code === 9999) {
            this.$message({
              type: 'success',
              message: '修改店铺配置成功'
            })
            this.$router.push('/storeInfo/' + this.$route.params.id)
          }
        })
      },
      cancelBtn () {
        this.$router.push('/storeInfo/' + this.$route.params.id)
      },
      selectChange () {
        this.city = ''
        this.province = this.province.split(',')
        axios.post('/api/systemArea/selectAreaList', {token: this.erpToken, provinceSysno: this.province[0]}).then((res) => {
          if (res.data.code === 9999) {
            this.cityLists = res.data.data
          }
        })
      },
      selectCity () {
        this.district = ''
        this.city = this.city.split(',')
        axios.post('/api/systemArea/selectAreaList', {token: this.erpToken, provinceSysno: this.province[0], citySysno: this.city[0]}).then((res) => {
          if (res.data.code === 9999) {
            this.districtLists = res.data.data
          }
        })
      }
    },
    mounted () {
      this.getStorage('erpToken').then((erpToken) => {
        this.erpToken = erpToken.replace(/"/g, '')
      }, function (error) {
        console.log(error)
      })
      axios.post('/api/systemArea/selectAreaList', {token: this.erpToken}).then((res) => {
        if (res.data.code === 9999) {
          this.localLists = res.data.data
        }
      })
    }
  }
</script>
<style scoped lang='less'>
  .storeConfigure{
    text-align:center;
    margin-top:100px;
    .createStore-inputw{
      width:300px;
      margin:0 5px;
    }
  }
</style>
